{extend name="property/public/insidePageBase" /}
{block name="title"}添加费用类别{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layui-form-pane">
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">费用类别</label>
                        <div class="layui-input-block">
                            <select name="pid" lay-filter="pid" lay-search>
                                <option value="">--请选择--</option>
                                {foreach $topCateData as $k=>$v}
                                <option value="{$v['id']}">{$v['cate_name']}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">系统分类</label>
                        <div class="layui-input-block" id="is_class_id_show">
                            <input type="text" name="set_finance" placeholder="请选择费用类别" disabled id="product-room-data" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="cate_name" placeholder="请输入分类名称" class="layui-input" lay-verify="required" autocomplete="off"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">分类图标</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <input type="text" name="picture"  placeholder="分类图标" id="picture" class="layui-input">
                </div>
                <img class="checkPictureByImg picture" style="width: 40px;height: 40px;">
                <div class="layui-input-inline layui-btn-container" style="width: auto;">
                    <button type="button" class="layui-btn layui-btn-primary uploadImg" lay-data="{field: 'picture',data:{dir:'asset/cate', field:'picture'}}">
                        <i class="layui-icon">&#xe67c;</i>
                    </button>
                </div>
            </div>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">是否显示</label>
                <div class="layui-input-block">
                    <input type="radio" name="is_show" autocomplete="off" value="1" title="开启" checked>
                    <input type="radio" name="is_show" autocomplete="off" value="2" title="隐藏">
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>
<script id="is_class_id_tpl" type="text/html">
    <select name="set_finance" lay-filter="is_class_id" id="is_class_id">
        <option value="">--请选择费用类别--</option>
        {{# layui.each(d.classList, function(index, elem) { }}
        <option value="{{index}}">{{elem}}</option>
        {{# }) }}
    </select>
</script>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use([ 'form', 'layer','laytpl'], function () {
        var form = layui.form,layer = layui.layer,$ = layui.$,laytpl = layui.laytpl;
        form.on('select(pid)', function(res) {
            let value = res.value
            loadPropertyUnitList(value)
        })
        function loadPropertyUnitList(classId) {
            $.get('{:request()->url()}', {pid:classId,get_type:'classData'}, function(res) {
                if(res.code == 0) {
                    var getTpl = document.getElementById('is_class_id_tpl').innerHTML; // 获取模板字符
                    var elemView = document.getElementById('is_class_id_show'); // 视图对象
                    laytpl(getTpl).render({classList:res.data}, function(str){
                        elemView.innerHTML = str;
                        form.render('select')
                    });
                }
            })
        }
        $('.uploadImg').selectImages({
            confirm:function(res,elem,data) {
                $('#' + data.field).val(res[0].src);
                $('.' + data.field).attr('src',res[0].src)
            }
        });

        form.on('select(is_class_id)', function(elem) {
            let value = elem.value
            let label
            if (value) {
                label = $(elem.elem).find('option[value="' + value + '"]').html()
            } else{
                label = ''
            }
            $('input[name="cate_name"]').val(label)
        })
    });
</script>
{/block}